<template>
	<view>
		<view class="navbar">
			<view style="height: 50rpx;"></view>
			<image @click="last" class="img" src="../../static/back.png" mode=""></image>
			<view class="input" @click="search">
				<u-search bgColor="#f1f1f1" :showAction="false" shape="square" placeholder="请输入商品名称丶品牌丶型号"
					v-model="keyword">
				</u-search>
			</view>
		</view>

		<view v-show="keyword == ''">
			<!-- 历史搜索 -->
			<view class="box-2">
				<view class="title">搜索历史</view>
				<image @click="show = false" class="del" src="../../static/del.png" mode=""></image>
				<view style="height: 10rpx;" class=""></view>
				<view class="sousuo" v-if="show">
					<view class=""> 电动机 </view>
					<view class=""> 手套 </view>
				</view>
				<view class="sousuo" v-else>
					<view class=""> 无 </view>
				</view>
			</view>

			<view class="box-1">
				<view class="title">热门搜索</view>
				<image class="hot" src="../../static/cuxiao.png" mode=""></image>
				<view style="height: 10rpx;" class=""></view>
				<view class="sousuo">
					<view class=""> 电线 </view>
					<view class=""> 遮阳网 </view>
					<view class=""> 手套 </view>
					<view class=""> 电线 </view>
					<view class=""> 镀锌钢管 </view>
					<view class=""> 工具 </view>
				</view>
			</view>
		</view>
		
		<view class="search-result" v-show="keyword != ''">
			<view class="item">
				<image src="../../static/sousuo.png" mode=""></image>
				<view class="result">{{keyword}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				keyword: ''
			}
		},

		methods: {
			last(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.navbar {
		width: 100%;
		height: 150rpx;
		background-color: #fff;

		.img {
			width: 20rpx;
			height: 30rpx;
			margin: 0 20rpx;
		}

		.input {
			width: 480rpx;
			display: inline-block;
			// position: relative;
			// left: 80rpx;
		}
	}

	.box-1 {
		width: 100%;
		z-index: 9;
		position: relative;
		margin-top: 40rpx;

		.title {
			display: inline-block;
			color: #222;
			font-size: 30rpx;
			margin: 0 0 0 30rpx;
			font-weight: bold;
		}

		.hot {
			width: 30rpx;
			height: 30rpx;
			margin-left: 10rpx;
			vertical-align: middle;
		}

		.sousuo {

			view {
				display: inline-block;
				padding: 10rpx 40rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin: 20rpx 20rpx 0 20rpx;
				font-size: 28rpx;
				color: #222;
			}
		}
	}

	.box-2 {
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		z-index: -1;
		margin-top: 30rpx;

		.title {
			display: inline-block;
			color: #222;
			font-size: 30rpx;
			margin: 0 0 0 30rpx;
			font-weight: bold;
		}

		.del {
			width: 35rpx;
			height: 35rpx;
			float: right;
			margin-top: 20rpx;
			margin-right: 30rpx;
		}

		.sousuo {

			view {
				display: inline-block;
				padding: 10rpx 40rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin: 20rpx 20rpx 0 20rpx;
				font-size: 28rpx;
				color: #222;
			}
		}
	}
	
	.search-result {
		.item {
			background-color: #fff;
			height: 100rpx;
			border-top: 1rpx solid #f9f9f9;
			image {
				width: 40rpx;
				height: 40rpx;
				margin: 0 30rpx;
				position: relative;
				top: 10rpx;
			}
			
			.result {
				display: inline-block;
				font-weight: 28rpx;
				line-height: 100rpx;
			}
		}
	}
</style>
